<script setup>
import {getCurrentInstance, ref} from "vue";
import {GetInfoByCateId} from "@/api/shopCate.js"


const {proxy} = getCurrentInstance()

const keywords = ref("") // 搜索关键字
const cateInfo = ref(JSON.parse(sessionStorage.getItem("cate-info")) || {})
const show = ref(false);
const list = ref([]);

// 分页下拉配置
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const total = ref(0)
const params = ref({
  cateId: cateInfo.value.id,
  page: 1,
  pageSize: 10
})


const onLoad = async () => {
  try {
    const res = await GetInfoByCateId(params.value)
    if (res.data.records || res.data.records) {
      list.value.push(...res.data.records)
      total.value = res.data.total
    }
    if (list.value.length >= total.value) {
      finished.value = true;
    }
    refreshing.value = false
    params.value.page++
  } catch (e) {
    loading.value = false
    finished.value = true
  }
};

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  // 重新加载数据
  list.value = []
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  params.value.page = 1
  onLoad();
};

// 返回上级
const onClickLeft = () => {
  proxy.$router.back()
}

// 进入商品详情页
const enterGoodsInfo = (row) => {
  sessionStorage.setItem("goods-info", JSON.stringify(row))
  proxy.$router.push("/goodsInfo")
}


</script>

<template>
  <van-nav-bar
      title="商品列表"
      left-arrow
      @click-left="onClickLeft"
  />
  <van-search v-model="keywords" placeholder="请输入搜索关键词"/>
  <!--搜索字段展示-->
  <div class="px-[12px] py-[5px] flex text-[14px] justify-between" id="search">
    <div class="text-[red] flex items-center">{{ cateInfo.title }}</div>
    <div class="flex items-center">
      <div>价格</div>
      <div class="flex flex-col ml-[5px]">
        <van-icon name="arrow-up" size="9"/>
        <van-icon name="arrow-down" size="9"/>
      </div>
    </div>
    <div class="flex items-center">
      <div>销量</div>
      <div class="flex flex-col ml-[5px]">
        <van-icon name="arrow-up" size="9"/>
        <van-icon name="arrow-down" size="9"/>
      </div>
    </div>
    <div class="flex items-center" @click="show = true">
      <div class="mr-[5px]">品牌</div>
      <van-icon name="arrow-down" size="10"/>
    </div>
  </div>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
        class="list overflow-auto"
        v-model:loading="loading"
        :finished="finished"
        :finished-text="list.length > 0 ?'没有更多了': ''"
        @load="onLoad"
    >
      <div class="content" v-if="list.length">
        <div v-for="item in list" class="bg-[#fff] rounded-[10px] overflow-hidden" @click="enterGoodsInfo(item)">
          <van-image :src="item.banner" class="w-full h-[142px]">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
          <div class="p-[10px]">
            <div class="text-[18px]">{{ item.title }}</div>
            <div class="text-[red] text-[14px] my-[5px]">$ {{ item.price.toFixed(2) }}</div>
            <div class="flex justify-between text-[#ccc]">
              <span>已售{{ item.sale }}套</span>
              <span>评分 {{ item.score.toFixed(1) }}</span>
            </div>
          </div>
        </div>
      </div>
      <van-empty image-size="100" description="空空如也" v-else/>
    </van-list>
  </van-pull-refresh>
  <!-- 底部弹出 -->
  <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" round closeable>
    <div class="p-[15px] text-[14px]">品牌选择</div>
  </van-popup>
</template>

<style scoped lang="scss">
.list {
  height: calc(100vh - 31px - 54px - 46px);
  background-color: #f4f4f4;
}

.content {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  padding: 10px;
}
</style>
